@import "util";
@import "../common/variables";
@import "../common/rem";
@import "style";

#writemobiledaily {
    background: #f0f4f6;
    .template-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .px2rem(padding-left, 20);
        .px2rem(padding-right, 20);
    }
    .daily-list {
        margin: 0;
        padding: 0;
        color: #2D2D2D;
        .px2rem(font-size, 30);
        list-style: none;
        background: #fff;
        span {
            .px2rem(margin-left, 55);
        }
        li {
            position: relative;
            padding: 0 0 0 90px;
            margin: 0;
            .px2rem(height, 100);
            .px2rem(line-height, 100);
            .px2rem(padding-left, 30);
            .px2rem(padding-right, 30);
            & + li::before {
                content: '';
                position: absolute;
                top: 0;
                .px2rem(left, 90);
                right: 0;
                height: 1px;
                background: #ddd;
                //.scale(1, .5);
            }
            &::after {
                content: '\e908';
                font-family: 'icomoon';
                position: absolute;
                top: 50%;
                .px2rem(right, 32);
                .translate3d(0, -50%, 0);
                .px2rem(font-size, 28);
                color: #aaa;
            }

        }
        i {
            position: absolute;
            top: 50%;
            .translate3d(0, -50%, 0);
            .px2rem(font-size, 36);
        }
        .icon--01 {
            color: #F76A75;
        }
        .icon--02 {
            color: #34C8FF;
        }
        .icon--03 {
            color: #B484FC;
        }
    }
    .bg-color-1 {
        position: relative;
        display: inline-block;
        .px2rem(width, 80);
        .px2rem(height, 80);
        .px2rem(line-height, 80);
        border-radius: 50%;
        text-align: center;
        i {
            color: #8991ff;
        }
    }
    .bg-color-2 {
        position: relative;
        display: inline-block;
        .px2rem(width, 80);
        .px2rem(height, 80);
        .px2rem(line-height, 80);
        border-radius: 50%;
        text-align: center;
        i {
            color: #80cd14;
        }
    }
    .bg-color-3 {
        position: relative;
        display: inline-block;
        .px2rem(width, 80);
        .px2rem(height, 80);
        .px2rem(line-height, 80);
        border-radius: 50%;
        text-align: center;
        i {
            color: #2ca3ff;
        }
    }
    .bg-color-4 {
        position: relative;
        display: inline-block;
        .px2rem(width, 80);
        .px2rem(height, 80);
        .px2rem(line-height, 80);
        border-radius: 50%;
        text-align: center;
        i {
            color: #20d5fc;
        }
    }
    .bg-color-5 {
        position: relative;
        display: inline-block;
        .px2rem(width, 80);
        .px2rem(height, 80);
        .px2rem(line-height, 80);
        border-radius: 50%;
        text-align: center;
        i {
            color: #F76A75;
        }
    }
    .bg-color-add {
        position: relative;
        display: inline-block;
        .px2rem(width, 80);
        .px2rem(height, 80);
        .px2rem(line-height, 80);
        border-radius: 50%;
        text-align: center;
        i {
            color: #DFE8F0;
        }
    }
    .bg-top {
        color: #fff;
    }
    .apply-list {
        background: #fff;
        text-align: center;
        color: #666;
        .px2rem(font-size, 24);
        .hd {
            position: relative;
            margin: 0;
            .px2rem(padding-left, 30);
            .px2rem(padding-right, 30);
            .px2rem(height, 62);
            .px2rem(line-height, 62);
            .px2rem(font-size, 26);
            text-align: left;
            font-weight: normal;
            color: #aaa;
            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                //.scale(1, .5);
                background: #ddd;
            }
        }
        .apply-row {
            position: relative;
            .flex-layout();
            .flex-vertical();
            &::after {
                position: absolute;
                content: '';
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background:#ddd;
               // .scale(1, .5);
            }
        }
        .apply-item {
            position: relative;
            width: 0%;
            .flex(1);
            .flex-layout();
            .flex-vertical-column();
            @media (min-device-width: 320px) and (max-device-width: 359px) {
                .px2rem(height, 213);
            }
            @media (min-device-width: 360px) and (max-device-width: 374px) {
                .px2rem(height, 240);
            }
            @media (min-device-width: 375px) and (max-device-width: 383px) {
                .px2rem(height, 250);
            }
            @media (min-device-width: 384px) and (max-device-width: 413px) {
                .px2rem(height, 256);
            }
            @media (min-device-width: 414px) and (max-device-width: 440px) {
                height: 414px;
            }
            .px2rem(height, 478);
            p {
                .px2rem(margin-top, 5);
            }
            i {
                position: absolute;
                left: 50%;
                top: 50%;
                .translate3d(-50%, -50%, 0);
                .px2rem(font-size, 80);

            }
            &:nth-child(2)::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 1px;
                background: #e7e7e7;
                //.scale(.5, 1);
            }
            &:nth-child(2)::after {
                content: '';
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 1px;
                background: #e7e7e7;
                //.scale(.5, 1);
            }
        }
    }
}
